<template>
  计算属性-{{computedAge}}
  <ul>
    <li v-for="userInfo in computedUserList" :key="userInfo.id">
      ID：{{userInfo.id}}，
      姓名：{{userInfo.name}}，
      性别：{{userInfo.sex==1?'男':'女'}}
      状态：
      <template v-if="userInfo.status==0">禁用</template>
      <template v-else-if="userInfo.status==1">启用</template>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
const age = ref<number>(20)
const computedAge = computed<number>(()=>{
  return age.value + 3
})
/**
 * 定义用户信息结构
 */
 interface UserInfo {
  id: number,
  name: string,
  sex: number, // 1为男，2为女,
  status: number // 0：禁用；1启用；2:已废弃
}
const userList = ref<Array<UserInfo>>([{
  id: 1,
  name: '张三',
  sex: 1,
  status: 0
},{
  id: 2,
  name: '李四',
  sex: 1,
  status: 1
},{
  id: 3,
  name: '李蓝',
  sex: 2,
  status: 2
}])
/**
 * 只返回非废弃数据
 */
const computedUserList = computed<Array<UserInfo>>(()=>{
  return userList.value.filter(item=>{
    return item.status!=2
  })
})
onMounted(()=>{
  setTimeout(()=>{
    age.value = 18
  },3000)
})
</script>